<template>
	<view class="tui-cubic__bezier" :class="{ 'tui-animate__bezier': animate }" :style="{ left: left, top: top, transform: transform_x }" @tap.stop="handleClick">
		<view
			class="tui-badge__bezier"
			:class="{ 'tui-animate__bezier_y': animate }"
			:style="{ width: width, height: height, borderRadius: height, backgroundColor: backgroundColor, transform: transform_y }"
		>
			<text v-if="!custom">1</text>
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	name: 'tuiCubicBezier',
	props: {
		//屏幕宽度[总宽度] px
		windowWidth: {
			type: Number,
			default: 375
		},
		//屏幕高度[总高度] px
		windowHeight: {
			type: Number,
			default: 667
		},
		//badge宽度
		width: {
			type: String,
			default: '40rpx'
		},
		//badge高度
		height: {
			type: String,
			default: '40rpx'
		},
		//动画badge背景颜色
		backgroundColor: {
			type: String,
			default: '#EB0909'
		},
		//badge left
		left: {
			type: String,
			default: '0'
		},
		//badge top
		top: {
			type: String,
			default: '0'
		},
		//是否自定义动画显示内容
		custom: {
			type: Boolean,
			default: false
		},
		//动画方向: up-右上(top，right)，down-右下(right,bottom), bottom-左下(left,bottom)，top-左上(left,top)
		//括号中为position必传值
		direction: {
			type: String,
			default: 'down'
		},
		//根据方向传值，终点的坐标点，一般为元素中心位置
		position: {
			type: Object,
			default() {
				return {
					top: 50,
					bottom: 80,
					left: 30,
					right: 40
				};
			}
		},
		//列表中索引 index
		index: {
			type: Number,
			default: 0
		},
		//自定义参数
		params: {
			type: [Number, String],
			default: 0
		}
	},
	data() {
		return {
			time: 0,
			animate: false,
			transform_x: '',
			transform_y: '',
			sys: null
		};
	},
	methods: {
		handleClick(e) {
			//550ms内防止重复点击
			if (new Date().getTime() - this.time <= 550) return;
			this.time = new Date().getTime();
			setTimeout(() => {
				this.time = 0;
			}, 550);
			this.bezierEffect(e);
			this.$emit('click', {
				index: this.index,
				params: this.params
			});
		},
		bezierEffect(e) {
			let touch = e.touches[0];
			let diff = {
				x: 0,
				y: 0
			};
			//up-右上，down-右下, bottom-左下，top-左上
			switch (this.direction) {
				case 'up':
					diff.x = this.windowWidth - touch.clientX - this.position.right;
					diff.y = this.position.top - touch.clientY;
					break;
				case 'down':
					diff.x = this.windowWidth - touch.clientX - this.position.right;
					diff.y = this.windowHeight - touch.clientY - this.position.bottom;
					break;
				case 'bottom':
					diff.x = this.position.left - touch.clientX;
					diff.y = this.windowHeight - touch.clientY - this.position.bottom;
					break;
				case 'top':
					diff.x = this.position.left - touch.clientX;
					diff.y = this.position.top - touch.clientY;
					break;
				default:
					break;
			}

			//移动距离
			this.animate = true;
			this.transform_x = `translate3d(${diff.x}px,0,0)`;
			this.transform_y = `translate3d(0,${diff.y}px,0) rotate(350deg) scale(0.8)`;
			setTimeout(() => {
				this.animate = false;
				//恢复到最初状态
				this.transform_x = 'none';
				this.transform_y = 'none';
			}, 550);
		}
	}
};
</script>

<style scoped>
.tui-cubic__bezier {
	position: absolute;
	opacity: 0;
	z-index: 20;
}

.tui-animate__bezier {
	opacity: 1;
	z-index: 990;
	transition: opacity 0.1s, transform cubic-bezier(0, 0, 0, 0) 0.5s;
}

.tui-animate__bezier_y {
	opacity: 1;
	z-index: 990;
	transition: opacity 0.1s, transform cubic-bezier(0.3, -0.2, 1, 0) 0.5s;
}

.tui-badge__bezier {
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
}
</style>
